/*
 * @Author: lp
 * @Date: 2022-01-17 19:14:53
 * @LastEditTime: 2022-05-18 11:13:15
 * @LastEditors: lp 654528967@qq.com
 * @Description: 系统全局设置
 * @FilePath: //nien-vue3-admin//src//store//modules//setting.ts
 */
import { defineStore } from 'pinia'
// import localforage from 'localforage'
export enum Them {
  themColorKey = '--el-color-primary',
  siderbarActiveBackgroundColorKey = '--el-color-primary-custom-1',
  siderbarBGColorKey = '--menu-bg-color',
  siderbarColorKey = '--siderbar-color',
  siderbarHoverColorKey = '--siderbar-hover-background-color',
  topBackgroundColorKey = '--top-background-color',
  topColorKey = '--top-color',
}
enum ThemDefault {
  themColorKey = '#0084ff',
  siderbarActiveBackgroundColorKey = '#d5ebff',
  siderbarBGColorKey = '#fff',
  siderbarColorKey = '#7a8298',
  siderbarHoverColorKey = '#ecf5ff',
  topBackgroundColorKey = '#262e39',
  topColorKey = '#fff'
}
const state:{
  [key:string]:any
  size:'' | 'default' | 'small' | 'large'
} = {
  headerH: '60px',
  tagViewH: '36px',
  tableH: '',
  footerH: '',
  tagViewBackground: '#DDE7F6',
  tagViewActiveColor: '#f2f6fc',
  size: 'default',
  showLogo: localStorage.getItem('showLogo') ? JSON.parse(localStorage.getItem('showLogo')) : true,
  showTagView: localStorage.getItem('showTagView') ? JSON.parse(localStorage.getItem('showTagView')) : true,
  // 系统主题颜色设置
  themColor: {
    [Them.themColorKey]: localStorage.getItem(Them.themColorKey) || ThemDefault.themColorKey,
    [Them.siderbarBGColorKey]: localStorage.getItem(Them.siderbarBGColorKey) || ThemDefault.siderbarBGColorKey,
    [Them.siderbarHoverColorKey]: localStorage.getItem(Them.siderbarHoverColorKey) || ThemDefault.siderbarHoverColorKey,
    [Them.siderbarActiveBackgroundColorKey]: localStorage.getItem(Them.siderbarActiveBackgroundColorKey) || ThemDefault.siderbarActiveBackgroundColorKey,
    [Them.siderbarColorKey]: localStorage.getItem(Them.siderbarColorKey) || ThemDefault.siderbarColorKey,
    [Them.topBackgroundColorKey]: localStorage.getItem(Them.topBackgroundColorKey) || ThemDefault.topBackgroundColorKey,
    [Them.topColorKey]: localStorage.getItem(Them.topColorKey) || ThemDefault.topColorKey,
  },
}
const useSetting = defineStore('setting', {
  state: () => state,
  actions: {
    setHeaderH(v: string): void {
      this.headerH = v
    },
    setTableH(v: string): void {
      this.tableH = v
    },
    setFooterH(v: string): void {
      this.footerH = v
    },
    setSize(v) {
      this.size = v
    },
    setShowLogo(v:boolean):void {
      localStorage.setItem('showLogo', JSON.stringify(v))
      this.showLogo = v
    },
    setShowTagView(v:boolean):void {
      localStorage.setItem('showTagView', JSON.stringify(v))
      this.showTagView = v
    },
    setThemColor(v:string) {
      localStorage.setItem(Them.themColorKey, v)
      this.themColor[Them.themColorKey] = v
      this.initThemColor()
    },
    setSiderActivebarBackground(v:string) {
      localStorage.setItem(Them.siderbarActiveBackgroundColorKey, v)
      this.themColor[Them.siderbarActiveBackgroundColorKey] = v
      this.initThemColor()
    },
    setSiderbarColor(v:string) {
      localStorage.setItem(Them.siderbarColorKey, v)
      this.themColor[Them.siderbarColorKey] = v
      this.initThemColor()
    },
    setSiderbarBGColor(v:string) {
      localStorage.setItem(Them.siderbarBGColorKey, v)
      this.themColor[Them.siderbarBGColorKey] = v
      this.initThemColor()
    },
    setSiderbarHBGColor(v:string) {
      localStorage.setItem(Them.siderbarHoverColorKey, v)
      this.themColor[Them.siderbarHoverColorKey] = v
      this.initThemColor()
    },
    setTopBackgroundColor(v:string) {
      localStorage.setItem(Them.topBackgroundColorKey, v)
      this.themColor[Them.topBackgroundColorKey] = v
      this.initThemColor()
    },
    setTopColor(v:string) {
      localStorage.setItem(Them.topColorKey, v)
      this.themColor[Them.topColorKey] = v
      this.initThemColor()
    },
    initThemColor() {
      Object.keys(this.themColor).forEach(key => {
        document.documentElement.style.setProperty(key, this.themColor[key])
      })
    },
    resetSetting() {
      this.themColor = {
        [Them.themColorKey]: ThemDefault.themColorKey,
        [Them.siderbarBGColorKey]: ThemDefault.siderbarBGColorKey,
        [Them.siderbarHoverColorKey]: ThemDefault.siderbarHoverColorKey,
        [Them.siderbarActiveBackgroundColorKey]: ThemDefault.siderbarActiveBackgroundColorKey,
        [Them.siderbarColorKey]: ThemDefault.siderbarColorKey,
        [Them.topBackgroundColorKey]: ThemDefault.topBackgroundColorKey,
        [Them.topColorKey]: ThemDefault.topColorKey,
      }
      this.setThemColor(ThemDefault.themColorKey)
      this.setSiderActivebarBackground(ThemDefault.siderbarActiveBackgroundColorKey)
      this.setSiderbarColor(ThemDefault.siderbarColorKey)
      this.setSiderbarBGColor(ThemDefault.siderbarBGColorKey)
      this.setSiderbarHBGColor(ThemDefault.siderbarHoverColorKey)
      this.setTopBackgroundColor(ThemDefault.topBackgroundColorKey)
      this.setTopColor(ThemDefault.topColorKey)
    },
  },

})
export default useSetting
